<template>
  <div class="data-board-common-layout">
    <el-row :gutter="1" justify="space-evenly" align="middle">
      <el-col :span="7">
        <MyChart
            :dataSource="categoryOption"
            :chartWidth="chartWidth"
            :chartHeight="chartHeight"
        ></MyChart>
      </el-col>
      <el-col :span="7">
        <MyChart
            :dataSource="userOption"
            :chartWidth="chartWidth"
            :chartHeight="chartHeight"
        ></MyChart>
        <div class="page_btns">
          <el-select-v2
              v-model="userIdList"
              filterable
              placeholder="用户范围选择"
              class="select-user"
              :options="userArr"
              multiple
              collapse-tags
              @change="requestUser($event)"
          >
          </el-select-v2>
        </div>
      </el-col>
      <el-col :span="7">
        <MyChart
            :dataSource="dateOption"
            :chartWidth="chartWidth"
            :chartHeight="chartHeight"
        ></MyChart>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import MyChart from "@/components/charts/index";
import {
  getCategoryChartData,
  getUserChartData,
  getDateChartData,
} from "@/core/api/databoard";
import {storeToRefs} from "pinia";
import {useUserStore, useCategoryStore} from "@/core/common/StorageUtil";
import {DateFormat} from "@/core/common/DateUtil";

const user = useUserStore();
const {userArr, userId} = storeToRefs(user);

const categoryStore = useCategoryStore();

const userIdList = ref([userId.value]);

const chartWidth = ref("100%");
const chartHeight = ref("calc(100vh - 180px)");

const categoryOption = ref({
  title: {
    text: "业务执行情况",
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        formatter: function (value) {
          return categoryStore.getCategory(value.value)?.processDesc + `[${value.value}]`;
        }
      }
    }
  },
  color: [
    '#7cffb2',
    '#4992ff'
  ],
  legend: {
    right: 20,
  },
  xAxis: {
    data: [],
    axisLabel: {
      formatter: function (value) {
        return categoryStore.getCategory(value)?.processDesc;
      }
    }
  },
  yAxis: {},
  dataZoom: [{
    type: 'slider',
  }],
  series: [
    {
      name: "已完成",
      type: "bar",
      stack: "bussiness",
      data: []
    },
    {
      name: "未完成",
      type: "bar",
      stack: "bussiness",
      data: []
    }
  ],
});
const userOption = ref({
  title: {
    text: "人员待办任务",
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    data: [],
  },
  yAxis: {},
  dataZoom: [{
    type: 'slider',
  }],
  series: [
    {
      name: "待办",
      type: "bar",
      data: [],
    },
  ],
});

const dateOption = ref({
  title: {
    text: "日期开立数",
  },
  tooltip: {
    trigger: 'axis'
  },

  xAxis: {
    data: [],
  },
  yAxis: {},

  dataZoom: [{
    type: 'slider',
    // 显示最近30天数据
    startValue: DateFormat(new Date().getTime() - (30 * 24 * 60 * 60 * 1000), "yyyy-MM-dd")
  }],

  series: [
    {
      name: "开立数",
      type: "line",
      data: [],
      label: {
        show: true,
        position: "top"
      }
    },
  ],
});

/**
 * 渲染数据到图表
 */
const renderData = (res, type, option) => {
  const dataX = [];
  const dataY = [];
  const dataCategory = [];
  for (let k in res) {

    if (type === 1) {
      dataX.push(res[k][0].toString());
    } else {
      dataX.push(k.toString());
    }

    if (res[k] instanceof Array) {
      dataY.push(res[k][1]);
      if (type === 0) {
        dataCategory.push(res[k][2]);
      }
    } else {
      dataY.push(res[k]);
    }
  }
  option.value.xAxis.data = dataX;
  option.value.series[0].data = dataY;
  if (dataCategory != null && dataCategory.length > 0) {
    option.value.series[1].data = dataCategory;
  }
};

const requestUser = (ids) => {
  if (!ids || ids.length === 0) {
    return;
  }

  getUserChartData({idList: ids + ''}).then((res) => {
    renderData(res, 1, userOption);
  });
};

onMounted(() => {
  getCategoryChartData().then((res) => {
    renderData(res, 0, categoryOption);
  });

  requestUser(userIdList.value);

  getDateChartData().then((res) => {
    renderData(res, 2, dateOption);
    dateOption.value.dataZoom.startValue = res[0];
  });
});
</script>

<style lang="scss" scoped>
.data-board-common-layout {
  position: relative;
  height: calc(100vh - 140px);

  .el-row {
    position: relative;
    top: 50%;
    transform: translateY(-50%);

    .el-col {
      position: relative;

      .page_btns {
        position: absolute;
        top: 2px;
        right: 5px;

        .select-user {
          width: 295px;
        }
      }
    }
  }
}
</style>
